<template>
  <!-- 本组件为路线的单条搜索结果，搜索结果集成于@pages/RoutResult.vue -->
  <div class="result-card" @click="goRoute(route.id)">
    <el-card style="height: 150px;line-height: 110px;padding:0px;border: 0px; border-radius:10px; cursor: pointer;"
      :body-style="{ padding: '0px', margin: '0px' }">
      <div style="display:inline-block; margin: 20px;line-height: 30px;width: 510px;vertical-align: top;">
        <!-- 标题 -->
        <div class="title" style="font-size: 20px; font-weight: 600; ">
          {{ route.title }}
        </div>
        <!-- 简介描述，居于标题下方 -->
        <div class="description" style="height:60px;">
          <p>{{ route.description }}</p>
        </div>
        <!-- 标签列表，横向排列 300-->
        <div style="display: flex;">
          <div
            style="display:inline-block; width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
            <a-tag color="orange" v-for="tag in route.tags" :key="tag">
              {{ tag }}
            </a-tag>
          </div>
          <!-- 学习数、点赞数、收藏数 50*3=150 -->
          <div style="display:inline-block;padding-right: 0px; width: 50px;">
            <a-icon type="eye" />
            {{ route.views }}
          </div>
          <div style="display:inline-block;padding-right: 0px; width: 50px;">
            <a-icon type="like" />
            {{ route.likes }}
          </div>
          <div style="display:inline-block; padding-right: 0px; width: 50px;">
            <a-icon type="star" />
            {{ route.collects }}
          </div>
        </div>
      </div>

      <div style="display:inline-block; text-align: right;padding-right: 0px;">

        <img :src="route.cover" height="150px" width="250px" />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    route: {
      cover: String,
      title: String,
      description: String,
      tags: [],
      view: Number,
      like: Number,
      collects: Number,
    },
  },
  methods: {
    goRoute(id) {
      console.log(id)
      this.$router.push({ path: '/route', query: { id } })
    },
  }
}
</script>

<style scoped>
.result-card {
  width: 800px;
  padding-bottom: 30px;
  height: 180px;
}

.el-card:hover {
  box-shadow: 0 0 10px #409EFF;
}

:deep .el-card__body {
  height: 150px;
  padding: 0px;
}

.el-tag {
  margin-right: 5px;
}

p {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>